<template>
	<!--  -->
	<uni-swiper-dot class="banner-swiper-dot" :info="bannerList" :current="bannerCurrent" mode="default" :dots-styles="dotStyle">
		<swiper class="swiper-box" autoplay="true" @change="bannerChange">
			<swiper-item v-for="(item, index) in bannerList" :key="index" @click="gotoLink(item)">
				<image mode="aspectFill" class="banner-item" :src="item.pictureUrl"></image>
			</swiper-item>
		</swiper>
	</uni-swiper-dot>
</template>

<script>
export default {
	props: {
		value: {
			type: Number | String,
			default: 0
		},
		list: {
			type: Array,
			default() {
				return [];
			}
		}
	},

	data() {
		return {
			bannerList: [],
			bannerCurrent: 0,
			dotStyle: {
				backgroundColor: 'rgba(193, 174, 255, 1)',
				border: '1px rgba(193, 174, 255, 1) solid',
				color: '#fff',
				selectedBackgroundColor: 'rgba(128, 108, 255, 1)',
				selectedBorder: '1px rgba(128, 108, 255, 1) solid'
			}
		};
	},
	created() {
		this.queryBannerList();
	},
	methods: {
		bannerChange(e) {
			this.bannerCurrent = e.detail.current;
		},
		gotoLink(item) {
			if (item.linkUrl) {
				this.gotoRouter(item.linkUrl);
			}
			console.log(item);
		},

		queryBannerList() {
			this.$api.queryBannerList({}).then(res => {
				if (res.code == 200) {
					this.bannerList = res.result;
				}
			});
		}
	}
};
</script>

<style lang="less">
.banner-swiper-dot {
	width: 686rpx;
	height: 240rpx;
	box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
	border-radius: 16rpx;
	.swiper-box {
		border-radius: 16rpx;
		width: 686rpx;
		height: 240rpx;
		background: #ffffff;
		.banner-item {
			border-radius: 16rpx;
			display: block;
			width: 686rpx;
			height: 240rpx;
			margin: 0 auto;
		}
	}
}
</style>
